<template>
	<div>
		<el-dialog class="addDialog" v-if="type === 'add'" title="新增学生信息" :visible.sync="isVisible" width="60%" center>
			<el-form :inline="true" :model="student" class="demo-form-inline">
				<el-form-item label="学号">
					<el-input v-model="student.stuno" placeholder="输入学号"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="student.stuname" placeholder="输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="专业">
					<el-input v-model="student.stumajor" placeholder="输入专业"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="student.stugender" placeholder="请选择性别">
						<el-option value="男"> 男 </el-option>
						<el-option value="女"> 女 </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="年级">
					<el-select v-model="student.stugrade" placeholder="请选择年级">
						<el-option v-for="i in [2018, 2019, 2020, 2021, 2022, 2023]" :key="i" :label="i" :value="i">{{ i }}</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="student.stuphone" placeholder="输入电话号码"></el-input>
				</el-form-item>
				<el-form-item label="居住地">
					<el-input v-model="student.stuaddess" placeholder="输入居住地"></el-input>
				</el-form-item>
				<el-form-item label="户籍">
					<el-input v-model="student.stunative" placeholder="输入户籍"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog class="editDialog" v-else title="更新学生信息" :visible.sync="isVisible" width="60%" center>
			<el-form :inline="true" :model="newStudent" class="demo-form-inline">
				<el-form-item label="学号">
					<el-input v-model="newStudent.stuno" placeholder="输入学号"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="newStudent.stuname" placeholder="输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="专业">
					<el-input v-model="newStudent.stumajor" placeholder="输入专业"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="newStudent.stugender" placeholder="请选择性别">
						<el-option value="男"> 男 </el-option>
						<el-option value="女"> 女 </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="年级">
					<el-select v-model="newStudent.stugrade" placeholder="请选择年级">
						<el-option v-for="i in [2018, 2019, 2020, 2021, 2022, 2023]" :key="i" :label="i" :value="i">{{ i }}</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="newStudent.stuphone" placeholder="输入电话号码"></el-input>
				</el-form-item>
				<el-form-item label="居住地">
					<el-input v-model="newStudent.stuaddess" placeholder="输入居住地"></el-input>
				</el-form-item>
				<el-form-item label="户籍">
					<el-input v-model="newStudent.stunative" placeholder="输入户籍"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { Message } from "element-ui";
import Cookie from "js-cookie";
import axios from "axios";
export default {
	name: "UpdateDialog",
	components: {},
	props: ["visible", "type", "editId", "newStudent"],
	data() {
		return {
			student: {
				stuaddess: "",
				stugender: "",
				stugrade: "",
				stuid: null,
				stumajor: "",
				stuname: "",
				stunative: "",
				stuno: "",
				stuphone: "",
			},
		};
	},
	computed: {
		isVisible: {
			get() {
				return this.visible;
			},
			set(value) {
				this.$emit("update:visible", value);
			},
		},
	},
	methods: {
		handleCancel() {
			console.log("取消");
			this.isVisible = false;
		},
		handleSubmit() {
			let token = Cookie.get("token");

			if (this.type === "add") {
				axios
					.post("http://114.67.241.121:8088/stu/add", this.student, {
						headers: {
							"Content-Type": "application/json",
							"Authorization": token,
						},
					})
					.then(res => {
						Message.success(res.data.msg);
					})
					.finally(() => {
						// 触发刷新
						this.$emit("refresh");
					});
			} else {
				console.log(this.newStudent)
				axios
					.post("http://114.67.241.121:8088/stu/edit", this.newStudent, {
						headers: {
							"Content-Type": "application/json",
							"Authorization": token,
						},
					})
					.then(res => {
						Message.success(res.data.msg);
					})
					.finally(() => {
						// 触发刷新
						this.$emit("refresh");
					});
			}

			this.isVisible = false;
		},
	},
};
</script>
<style lang="less" scoped>
.addDialog {
	background-color: rgba(196, 99, 158, 0.425);
}
.editDialog {
	background-color: rgba(119, 171, 227, 0.315);
}
</style>
